﻿@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="icon" type="image/gif" href="~/img/animated_favicon1.gif">
    <link href="~/UILibs/easyui/themes/default/easyui.css" rel="stylesheet" />
    <link href="~/UILibs/easyui/themes/icon.css" rel="stylesheet" />
    <link href="~/Css/css.css" rel="stylesheet" />

    <script src="~/Scripts/jquery-1.7.1.min.js"></script>
    <script src="~/Scripts/jquery.jqprint-0.3.js"></script>
    <script src="~/UILibs/easyui/jquery.easyui.min.js"></script>
    <script src="~/Scripts/datagrid-detailview.js"></script>
    <script src="~/UILibs/easyui/locale/easyui-lang-zh_CN.js"></script>
    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
    <script src="~/Scripts/jquery.validate.min.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
    <script src="~/Scripts/echarts.common.min.js"></script>



    <title></title>
        <style type="text/css">
        .subtotal {
            font-weight: bold;
            color: black;
            /*//background-color: dodgerblue;*/
            height: 200px;
            width: 200px;
            font-size: 20px;
        }

        .subtotal2 {
            font-weight: bold;
            color: black;
            width: 6%;
            margin-top: 10px;
            background-color:orange;
            font-size: 20px;
        }
        /*合计单元格样式*/
    </style>
    <script type="text/javascript">
        $(function () {
            //动态加载  店铺列表
            $("#shopName").combobox({
                url: pageConfig.getShopName,
                //action 
                valueField: "shopID",
                textField: "shopName"
            });
            //页面加载显示总金额    等同于下面  查询加载总金额  txtRepeatRate  txtAllRate
            $.ajax({
                url: " /CustomerFlow/GetRate?date1=" + $("#txtDate1").val() + '&date2=' + $('#txtDate2').val(),
                dataType: "JSON",
                type: "GET",
                success: function (data) {
                    $("#txtAllRate").val(data.AllSum);
                    $("#txtRepeatRate").val(data.RepeatRate+"%");
                }
            });
        });

        $(function () {
            $("#data").datagrid({
                fit: true,
                title: '顾客复购情况统计',
                striped: true,
                rownumbers: true,
                showFooter: true,
                columns:
                    [[
                        {
                            field: 'userCode', title: '客户编号', width: 120, halign: 'center', align: 'center'
                        },
                        {
                            field: 'wechatName', title: '微信名称', width: 120, halign: 'center', align: 'center'
                        },
                        //{
                        //    field: 'userName', title: '用户姓名', width: 120, halign: 'center', align: 'center'
                        //},
                        {
                            field: 'userPhone', title: '手机号', width: 120, halign: 'center', align: 'center'
                        },
                        //{
                        //    field: 'userSex', title: '性别', width: 80, halign: 'center', align: 'center'
                        //},
                        {
                            field: 'visitorRate', title: '来访频次', width: 100, halign: 'center', align: 'center', sortable: true
                        },
                        {
                            field: 'consumeMoney', title: '消费总金额（RMB/元）', width: 180, halign: 'center', align: 'center', sortable: true
                        },
                        {
                            field: 'memberExp', title: '积分', width: 100, halign: 'center', align: 'center',
                        },
                        {
                            field: 'memberBalance', title: '余额（RMB/元）', width: 180, halign: 'center', align: 'center',
                        },
                    ]],

                singleSelect: true,
                loadMsg: '正在加载数据,请耐心等待.......',
                url: '/CustomerFlow/GetFlowBySql',
                queryParams: {
                    date1: $('#txtDate1').val(),
                    date2: $('#txtDate2').val(),

                },
                sortName: 'visitorRate',
                sortOrder: 'desc',
                toolbar: '#tool',

            });

            $('#data').datagrid({
                view: detailview,
                detailFormatter: function (index, row) {//严重注意喔 
                    return '<div"><table id="ddv-' + index + '" ></table></div>';
                },
                onExpandRow: function (index, row) {//嵌套第一层，严重注意喔 
                    var ddv = $(this).datagrid('getRowDetail', index).find('#ddv-' + index);//严重注意喔 
                    ddv.datagrid({
                        view: detailview,
                        url: '/CustomerFlow/GetOneOrderByUserBySql',
                        autoRowHeight: true,
                        fitColumns: true,//改变横向滚动条 
                        singleSelect: false,//去掉选中效果 
                        rownumbers: true,
                        loadMsg: '',
                        columns: [[//orderTime    orderSumprice  orderPay  discountMoney  storeName orderCode
                             { field: 'orderCode', title: '订单编号', width: 180, halign: 'center', align: 'center', },
                             { field: 'orderTime', title: '订单日期', width: 180, halign: 'center', align: 'center', },
                             { field: 'orderSumprice', title: '订单金额', width: 100, halign: 'center', align: 'center', },
                             { field: 'discountMoney', title: '优惠金额', width: 100, halign: 'center', align: 'center', },
                             { field: 'orderType', title: '支付方式', width: 100, halign: 'center', align: 'center', },
                             { field: 'storeName', title: '消费店铺', width: 100, halign: 'center', align: 'center', },
                        ]],
                        queryParams: {
                            userCode: row.userCode,
                            date1: $('#txtDate1').val(),
                            date2: $('#txtDate2').val(),
                            sort: "consumeMoney",
                            order: "desc"
                        },

                        detailFormatter: function (index, row2) {//严重注意喔  =2   
                            return '<div"><table id="ddv2-' + index + '" style=""></table></div>';
                        },
                        onExpandRow: function (index2, row2) {//嵌套第二层，严重注意喔
                            var ddv2 = $(this).datagrid('getRowDetail', index2).find('#ddv2-' + index2);//严重注意喔 
                            ddv2.datagrid({
                                view: detailview,
                                url: '/CustomerFlow/GetDetailByID',
                                autoRowHeight: true,
                                fitColumns: true,
                                singleSelect: false,
                                rownumbers: true,
                                loadMsg: '',
                                columns: [[
                                {
                                    field: 'waresCode', title: '商品条形码', width: 85, color: 'red', halign: 'center', align: 'center',
                                },
                                {
                                    field: 'waresName', title: '商品名称', width: 120, halign: 'center', align: 'center',
                                },
                                {
                                    field: 'waresNumber', title: '购买数量', width: 100, halign: 'center', align: 'center',
                                },
                                {
                                    field: 'waresPrice', title: '单价', width: 100, halign: 'center', align: 'center',
                                },
                                {
                                    field: 'TotalPrice', title: '总价', width: 100, halign: 'center', align: 'center',
                                },
                                ]],
                                detailFormatter: function (index2, row3) {//严重注意喔
                                    return '<div"><table id="ddv3-' + index2 + '" style=""></table></div>';
                                },
                                queryParams: {
                                    orderCode: row2.orderCode,
                                    date1: $('#txtDate1').val(),
                                    date2: $('#txtDate2').val(),
                                },
                                onResize: function () {//严重注意喔  
                                    ddv.datagrid('fixDetailRowHeight', index2);
                                    $('#data').datagrid('fixDetailRowHeight', index);
                                },
                                onLoadSuccess: function () {//严重注意喔  
                                    setTimeout(function () {
                                        ddv.datagrid('fixDetailRowHeight', index2);
                                        ddv.datagrid('fixRowHeight', index2);
                                        $('#data').datagrid('fixDetailRowHeight', index);
                                        $('#data').datagrid('fixRowHeight', index);
                                    }, 0);
                                }
                            });//严重注意喔  
                            ddv.datagrid('fixDetailRowHeight', index2);
                            $('#data').datagrid('fixDetailRowHeight', index);
                        },
                    });
                    $('#data').datagrid('fixDetailRowHeight', index);
                }
            });
        });
        var pageConfig = {
            getAction: '@Url.Action("RepeatGoNum")',
            getChart: '@Url.Action("GetChart")',
            getShopName: '@Url.Action("GetShopName")',
        };

        function searchData() {
            //alert($("#shopName").combobox('getValue')); //获取到的是  id getText 应该是 获取到的name
            var start = $("#txtDate1").datebox('getValue');
            var end = $("#txtDate2").datebox('getValue');
            if (txtDate1.value > txtDate2.value) {
                alert("开始日期不能大于结束日期！");
                $("#txtDate1").textbox('setValue');//清空文本框的值
                $("#txtDate1").textbox('clear');
                $("#txtDate2").textbox('setValue');
                $("#txtDate2").textbox('clear');
                txtDate1.focus();
                txtDate2.focus();
                return false;
            }
            $("#data").datagrid('load', {
                date1: $('#txtDate1').val(),
                date2: $('#txtDate2').val(),

            });
            //页面加载显示总金额    等同于下面  查询加载总金额  txtRepeatRate  txtAllRate
            $.ajax({
                url: " /CustomerFlow/GetRate?date1=" + $("#txtDate1").val() + '&date2=' + $('#txtDate2').val(),
                dataType: "JSON",
                type: "GET",
                success: function (data) {
                    $("#txtAllRate").val(data.AllSum);
                    $("#txtRepeatRate").val(data.RepeatRate + "%");
                }
            });

        }
    </script>


</head>
<body class="easyui-layout" style="width: 100%; height: 100%">
    <div data-options="region:'center'">

        <table id="data" style="height: 80px"></table>

    </div>

    <div id="tool" style="padding: 30px;">
        <div>
            &nbsp&nbsp&nbsp &nbsp&nbsp&nbsp 
               日期：<input id="txtDate1" type="text" class="easyui-datebox" />
            -- 
                <input id="txtDate2" type="text" class="easyui-datebox" onchange="searchData()" />
            &nbsp&nbsp&nbsp &nbsp&nbsp&nbsp &nbsp&nbsp&nbsp 
                <a class="easyui-linkbutton" iconcls="icon-search" onclick="searchData()">查询</a>

            <div style="margin-top: 20px;">
                <span style="font-size: larger; color: red">&nbsp&nbsp &nbsp&nbsp&nbsp   &nbsp&nbsp&nbsp &nbsp&nbsp&nbsp   注意:默认显示为各用户本月的复购情况</span>
                <br/>                
                 &nbsp&nbsp&nbsp  &nbsp&nbsp&nbsp  &nbsp&nbsp&nbsp 
                &nbsp&nbsp&nbsp<span class="subtotal">总访问频次为：</span> 
                <input id="txtAllRate" type="text" class="subtotal2" />
                &nbsp&nbsp&nbsp<span class="subtotal">复购率为：</span>
                <input id="txtRepeatRate" type="text" class="subtotal2" />
            </div>
        </div>

    </div>


</body>

</html>
